<template>
  <el-dialog :close-on-click-modal="false" class="pf-dialog pf-dialog_center form-script-dialog"
    lock-scroll append-to-body v-bind="$attrs" width="1000px" :modal-append-to-body="false"
    title="表单样式" v-on="$listeners" @open="onOpen">
    <div class="form-script-dialog-body">
      <div class="right-main">
        <div class="codeEditor">
          <pfCodeEditor v-model="text" :options="options" ref="CodeEditor" />
        </div>
        <div class="tips">
          <p>示例：</p>
          <p>.text{</p>
          <p style="text-indent: 2em">
            background-color: #fff; //背景颜色
          </p>
          <p style="text-indent: 2em">
            font-size: 18px; //字体大小
          </p>
          <p>
            }
          </p>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{$t('common.cancelButton')}}</el-button>
      <el-button type="primary" @click="onClose()">{{$t('common.confirmButton')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import pfCodeEditor from '@/components/pfEditor/monaco'
export default {
  components: { pfCodeEditor },
  props: ['value'],
  data() {
    return {
      text: '',
      options: {
        language: 'css'
      },
    }
  },
  methods: {
    onOpen() {
      this.text = this.value
      this.$nextTick(() => {
        this.$refs.CodeEditor.changeEditor({
          value: this.text,
          options: this.options
        })
      });
    },
    onClose() {
      this.$emit('updateStyleScript', this.text)
      this.closeDialog()
    },
    closeDialog() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.form-script-dialog-body {
  height: 600px;
  display: flex;
  overflow: hidden;
  .right-main {
    height: 600px;
    flex: 1;
    display: flex;
    flex-direction: column;
    .codeEditor {
      flex: 1;
      border: 1px solid #dcdfe6;
    }
    .tips {
      flex-shrink: 0;
      padding: 8px 16px;
      background-color: #ecf8ff;
      border-radius: 4px;
      border-left: 5px solid #50bfff;
      margin-top: 20px;
      p {
        line-height: 24px;
        color: #5e6d82;
      }
    }
  }
}

</style>